<template>
  <el-dialog
    v-model="visible"
    :title="title"
    @close="emit('close')"
    width="600px"
    :fullscreen="fullscreen"
  >
    <slot name="content"></slot>
    <template #footer>
      <el-button @click="emit('close')">取消</el-button>
      <el-button type="primary" @click="emit('submit')">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: "弹窗",
  },
});
const emit = defineEmits(["close", "submit"]);
const visible = ref(false);
const fullscreen = computed(() => window.innerWidth <= 768);

const open = () => {
  visible.value = true;
};

const close = () => {
  visible.value = false;
};
defineExpose({
  open,
  close,
});
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input__inner) {
  border-radius: 6px;
}

:deep(.el-textarea__inner) {
  border-radius: 6px;
}

.activity-option {
  padding: 4px 0;
}

.activity-title {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.activity-info {
  font-size: 12px;
  color: #909399;
  display: flex;
  gap: 12px;
}

.activity-time,
.activity-location {
  display: flex;
  align-items: center;
}

.activity-time::before {
  content: "🕒";
  margin-right: 4px;
}

.activity-location::before {
  content: "📍";
  margin-right: 4px;
}
</style>
